<template>
  <div id="controlBar">
    <input
      class="left input"
      v-model="color_basic"
      type="text"
      placeholder="添加色类名称"
    />
    <button class="left mt-20" @click="$emit('addColorBasic', color_basic)">
      添加色类
    </button>
    <button class="left m-20" @click="$emit('removeColorBasic')">
      删除色类
    </button>
    <input
      class="left input"
      v-model="color_medium"
      type="text"
      placeholder="添加色组名称"
    />
    <button class="left mt-20" @click="$emit('addColorMedium', color_medium)">
      添加色组
    </button>
    <button class="left m-20" @click="$emit('removeColorMedium')">
      删除色组
    </button>
    <button class="right m-20" @click="$emit('save')">保存</button>
    <button class="right m-20" @click="$emit('restore')">恢复</button>
    <button class="right m-20" @click="$emit('revoke')">撤销</button>

    <input class="checkbox" id="autoSave" type="checkbox" v-model="autoSave" />
    <label for="autoSave">自动保存</label>
  </div>
</template>

<script>
export default {
  name: "controlBar",
  data() {
    return {
      autoSave: false,
      color_basic: undefined,
      color_medium:undefined,
    };
  },
};
</script>

<style scoped>
#controlBar {
  margin: 10px 30px;
  height: 80px;
}
button {
  width: 100px;
  height: 45px;
  font-size: 20px;
}
.right {
  float: right;
}
.left {
  float: left;
}
.m-20 {
  margin: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.input {
  margin: 20px 0;
  width: 200px;
  height: 40px;
  font-size: 20px;
}
label {
  float: right;
  margin-top: 20px;
  width: 120px;
  height: 45px;
  font-size: 28px;
  text-align: right;
  line-height: 45px;
}

.checkbox {
  float: right;
  margin-top: 20px;
  width: 45px;
  height: 45px;
  font-size: 18px;

  line-height: 80px;
}
</style>